<template>
  <el-row  class="service_zoom">
    <module-title :cn_name="'服务项目'" :en_name="'SERVICE PROJECT'" :mname="'service_zoom'" ></module-title>
    <el-row>
      <transition-group
        name="flip-list"
        v-on:before-enter="beforeIconEnter"
        v-on:enter="iconEnter"
        mode="in-out"
      >
      <el-col :span="6" class="service_icon" v-for="item in iconData" v-bind:key="item" v-if="iconMove">
        <router-link :to="{path: '/Enroll'}">
        <div :class="item.classNames"></div>
        <p class="system_title">{{item.titleName}}</p>
        </router-link>
      </el-col>
      </transition-group>
    </el-row>
  </el-row>
</template>
<script>
  import ModuleTitle from '../Common/module-title'
  export default {
      data(){
        return {
          iconMove : false,
          iconData : [
            {classNames : 'ms-icon ms-icon-lisen ms-icon-middle' , titleName : '免费试听'},
            {classNames : 'ms-icon ms-icon-edit ms-icon-middle' , titleName : '在线报名'},
            {classNames : 'ms-icon ms-icon-clock ms-icon-middle' , titleName : '开班时间'},
            {classNames : 'ms-icon ms-icon-map ms-icon-middle' , titleName : '乘车路线'}
          ]
        }
      },
      props : ['service_zoom','offsetT','showList'],
      components : {ModuleTitle},
      methods: {
        beforeIconEnter (el) {
          Velocity(el, { opacity: 0}, { duration: 0 })
        },
        iconEnter(el , done){
          Velocity(el, { opacity: 0.2 , translateY : '500px'}, { duration: 200 })
          Velocity(el, { opacity: 0.5 , translateY : '0px'}, { duration: 1000 })
          Velocity(el, { opacity: 1 , translateY : '0px'}, { duration: 1500  , complete: done})
        },
        windowScrolls () {
          if (this.$el.offsetTop < window.scrollY + 300 ) {
            this.iconMove = true;
          }
        }
      },
    mounted(){
      window.addEventListener('scroll', this.windowScrolls)
      if (this.$el.offsetTop < window.scrollY + 300 ) {
        this.iconMove = true;
      }
    }
  }
</script>
<style>
  .service_icon a{
    text-decoration: none;
    color : #000;
  }
  .service_icon a:hover {
    color : #f39800!important;
    cursor: pointer;
  }
</style>
